<!--出单工号列表-->
<template>
  <div class='app-container'>
    <div class="app-box">
      <div class="staffD-top">
        <div class="staffD-search">
          <span class="staffD-lb">
            保险公司：
          </span>
          <el-select v-model="data.value" placeholder="请选择保险公司" class='inputbox' size='mini' @change='search()'>
            <el-option-group v-for="group in items" :key="group.letter" :label="group.letter">
              <el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName
      " :value="item.id">
              </el-option>
            </el-option-group>
          </el-select>
          <!--   <div class="search-btn">
                <el-button size="mini" type="info" v-on:click='search()'>搜索</el-button>
            </div> -->
        </div>
        <div class="staffD-add">
          <el-button size='mini' type='primary' @click="toAdd" v-if="util.hasRule('Pages.Administration.Staffs.Create')" icon="el-icon-plus">新建出单工号</el-button>
        </div>
      </div>
      <div>
        <el-table v-loading="loading" :data="staffList" style="width: 100%" class='uti-table util-tb' stripe='true'>
          <el-table-column prop="insurance" label='保险公司' width="180"></el-table-column>
          <el-table-column prop="staffAccount" label='工号 / 机构代码' width="220">
            <template slot-scope="scope">
              <span v-if='scope.row.insuranceCode'>{{scope.row.staffAccount}}&nbsp;/&nbsp;{{scope.row.insuranceCode}}</span>
              <span v-else>{{scope.row.staffAccount}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="describe" label="工号描述" width='190'></el-table-column>
          <el-table-column prop="region" label="所属地区"></el-table-column>
          <el-table-column label="状态" width='100'>
            <template slot-scope="scope">
              <div v-if="scope.row.isActive">
                <i class="icon iconfont icon-icon01" style="color:#389E0D"></i>正常</div>
              <div v-if="!scope.row.isActive">
                <i class="icon iconfont icon-icon01" style="color:#CF1322"></i>禁用</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width='120' align='right'>
            <template slot-scope="scope">
              <template v-if="util.hasRule('Pages.Administration.Staffs.Edit')">
                <span v-if="!scope.row.isActive" class="switch-btn" v-on:click="statusToggle(scope.row)">启用</span>
                <span v-if="scope.row.isActive" class="switch-btn" v-on:click="statusToggle(scope.row)">禁用</span>
                <span class="edit-btn" @click="toEdit(scope.row.id)">编辑</span>
              </template>

            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="staffD-page">
        <el-pagination @current-change="handleCurrentChange" :current-page='currentPage' background :page-size="10" layout="total,prev, pager, next" :total="pagetotal"></el-pagination>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      staffList: null,
      loading: false,
      data: {
        value: ""
      },
      options: null,
      pagetotal: null,
      currentPage: 1,
      page: 1
    };
  },
  mounted() {
    this.groupList();
    if (this.$route.query.page) {
      this.page = this.$route.query.page;
    }
    if (this.$route.query.insuranceId) {
      this.data.value = this.$route.query.insuranceId;
      this.fetchData(this.data.value);
    }else{
        this.fetchData();
    }
  
  },
  watch: {
    $route(to, from) {
      this.page = this.$route.query.page;
      this.data.value = this.$route.query.insuranceId;
      this.fetchData(this.data.value);
    }
  },
  methods: {
    fetchData(val) {
      this.loading = true;
      let params = {};
      if(val){
        params = {
          pageIndex: this.page,
          insuranceId: val
        };
      }else{
        params = {
          pageIndex: this.page,
          insuranceId: ""
        };
      }
      this.post(params, "services/app/staff/GetStaffs").then(response => {
        if (response.success) {
          this.loading = false;
          this.staffList = response.result.items;
          console.log(this.staffList);
          this.pagetotal = response.result.totalCount;
          this.currentPage = this.page;
        }
      });
    },
    statusToggle(obj){
       this.$confirm('确定要更改状态吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal:false,
          type: 'warning',
          center: true,
        }).then(() => {
            let id=obj.id
            const that = this;
            let params = {
                // id: that.staffList[index].id
                id: id,
            }
            this.post(params,'services/app/staff/UpdateStaffState').then(rs=>{
                console.log(rs);
                if(rs.success){
                  obj.isActive=rs.result.isActive;
                }
            })
        })
    },
 
    groupList() {
      let all = {
        letter: "",
        insurances: [{ insuranceName: "全部保险公司", id: "" }]
      };
      let params = {
        // id:val,
      };
      this.post(params, "services/app/common/GetGroupInsurances").then(re => {
        if (re.success) {
          this.items = re.result.items;
          let result = re.result.items;
          result.unshift(all);
          console.log(result);
          this.options1 = result;
        }
      });
    },
    search() {
      this.$router.push({
        name: "staff",
        query: {
          page: 1,
          insuranceId: this.data.value,
          time:new Date().getTime()
        }
      });
    },
    toEdit(id) {
      console.log(id);
      this.$router.push({
        name: "staffedit",
        params: {
          id: id
        }
      });
    },
    toAdd() {
      this.$router.push({
        name: "staffnew",
        params: {
          id: 0
        }
      });
    },
    handleCurrentChange(val) {
      //this.fetchData(val)
      this.$router.push({
        name: "staff",
        query: {
          page: val,
          insuranceId: this.data.value,
          time:new Date().getTime()
        }
      });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss"  scoped>
.app-box {
  font-size: 13px;
  width: 100%;
  overflow: hidden;
  height: 100%;
  border-radius: 3px;
  background: #fff;
  overflow-y: auto;
  .icon-icon01 {
    font-size: 14px;
    vertical-align: middle;
  }
  .staffD-top {
    height: 28px;
    margin-bottom: 30px;
    .staffD-search {
      float: left;
      width: 440px;
      position: relative;
      padding-left: 80px;
      .staffD-lb {
        font-size: 13px;
        float: left;
        position: absolute;
        left: 0;
        top: 0;
        width: 80px;
        padding-right: 5px;
        line-height: 28px;
        color: #606266;
      }
      .util-select {
        display: inline-block;
        width: 280px;
        .util-select-box {
          input {
            color: #999;
          }
        }
      }
      .search-btn {
        width: 60px;
        display: inline-block;
        position: relative;
        margin-left: 15px;
        //.search-sub{
        //  border: 1px solid #ececee;
        //  color: #333;
        //  height: 28px;
        //  width:60px;
        //  line-height: 28px;
        //  padding: 0 11px;
        //  border-radius: 5px;
        //  background: #fbfbfb;
        //  outline: none;

        //}
      }
    }
    .staffD-add {
      float: right;
      display: inline-block;
      .add-btn {
        /*   border: 1px solid #ececee;*/
        color: #fff;
        height: 28px;
        line-height: 28px;
        border-radius: 5px;
        background: #108ee9;
        outline: none;
        padding: 0 12px;
        min-width: 100px;
        transition: all ease 0.2s;
      }
    }
  }
  /*.staffD-table{*/
  /*font-size:13px;*/
  /* color:#333;*/
  /*min-height:440px;*/
  /*z-index:1;*/
  .util-tb {
    tr {
      .staff-id {
        width: 401px;
      }
      .state-circle {
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background-color: #9b9b9b;
        display: inline-block;
        line-height: 40px;
        position: relative;
        top: -2px;
        margin-right: 6px;
      }
      .state-active {
        background-color: #7ed321;
      }
      .switch-btn {
        color: #027dca;
        margin-right: 10px;
        cursor: pointer;
      }
      .edit-btn {
        color: #027dca;
        cursor: pointer;
      }
      /*td:nth-of-type(6):hover{
                    width:200px;
                      .hover-box{
                          display:block;
                      }
                      .show-span{
                          display: none;
                      }
                }*/
      .show-span {
        display: block;
      }
      .hover-box {
        display: none;
      }
    }
  }
  .staffD-page {
    float: right;
    margin-top: 30px;
  }
}
</style>
